<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片预览测试</title>
</head>
<body>

    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" charset="UTF-8">

        debugger;
        var list = new Map();
        list.set("image1","https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg");
        list.set("image2","https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg");
        list.set("image3","https://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg");
        console.log(list);

        list.forEach(function (value,key,list) {
            getBase64(value)
                .then(function(base64){
                    var data64 = localStorage.getItem(key);
                    if(data64 == null || data64 == ''){
                        localStorage.setItem(key, base64);
                        console.log("第一次加载数据！");
                        list.set(key,base64);
                    }else{
                        console.log("加载已缓存数据！");
                        list.set(key,data64);
                    }
                },function(err){
                    console.log(err);
                });
        });

        console.log(list);

        function getBase64(img){
            function getBase64Image(img,width,height) {
                var canvas = document.createElement("canvas");
                canvas.width = width ? width : img.width;
                canvas.height = height ? height : img.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
                var dataURL = canvas.toDataURL();
                return dataURL;
            }
            var image = new Image();
            image.crossOrigin = '';
            image.src = img;
            var deferred=$.Deferred();
            if(img){
                image.onload =function (){
                    deferred.resolve(getBase64Image(image));
                }
                return deferred.promise();
            }
        }
    </script>

</body>
</html>